<%--
  Created by IntelliJ IDEA.
  User: a479655315
  Date: 2019/8/29
  Time: 15:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8"/>
    <link rel="icon" type="image/png"
          href="img/favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <title>产品列表</title>

    <meta
            content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'
            name='viewport'/>
    <meta name="viewport" content="width=device-width"/>


    <!-- Bootstrap core CSS     -->
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css"
          rel="stylesheet"/>

    <!-- Animation library for notifications   -->
    <link href="${pageContext.request.contextPath}/css/animate.min.css"
          rel="stylesheet"/>

    <!--  Light Bootstrap Table core CSS    -->
    <link
            href="${pageContext.request.contextPath}/css/light-bootstrap-dashboard.css"
            rel="stylesheet"/>


    <!--  CSS for Demo Purpose, don't include it in your project     -->
    <link href="${pageContext.request.contextPath}/css/demo.css"
          rel="stylesheet"/>


    <!--     Fonts and icons     -->
    <link
            href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
            rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/pe-icon-7-stroke.css"
          rel="stylesheet"/>
    <!--   Core JS Files   -->
    <script src="${pageContext.request.contextPath}/js/jquery-1.10.2.js"
            type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"
            type="text/javascript"></script>

    <!--  Checkbox, Radio & Switch Plugins -->
    <script
            src="${pageContext.request.contextPath}/js/bootstrap-checkbox-radio-switch.js"></script>

    <!--  Charts Plugin -->
    <script src="${pageContext.request.contextPath}/js/chartist.min.js"></script>

    <!--  Notifications Plugin    -->
    <script src="${pageContext.request.contextPath}/js/bootstrap-notify.js"></script>


    <!-- Light Bootstrap Table Core javascript and methods for Demo purpose -->
    <script
            src="${pageContext.request.contextPath}/js/light-bootstrap-dashboard.js"></script>

    <!-- Light Bootstrap Table DEMO methods, don't include it in your project! -->
    <script src="${pageContext.request.contextPath}/js/demo.js"></script>

    <script>
        $(function () {
            findCategories() //回显
            $("#seltypeID").change(function () {
                findCategories()
            })
            $("#delPro").click(function () {
                if(confirm("确认删除？")){
                    delPro()
                }
            })
        })

        //搜索栏显示类目
        function findCategories() {
            var cid = $("#seltypeID").val()
            if (cid == -1) {
                $("#selPend").empty();
                $("#selPend").append(`<option value="-1">请选择</option>`)
                return
            }

            $.ajax({
                url: '${pageContext.request.contextPath}/category/findCategorySecondByCidToJson',
                dataType: 'json',
                type: 'get',
                data: {
                    cid: cid
                },
                success: function (data) {
                    $("#selPend").empty();
                    for (var i = 0; i < data.length; i++) {
                        str = ""
                        // 回显
                        if (data[i].id == ${pageInfo.searchCsid}) {
                            str = "selected='selected'"
                        }
                        $("#selPend").append("<option " + str + " value=" + data[i].id + ">" + data[i].csname + "</option>")
                    }
                }

            })
        }

        //删除产品
        function delPro() {
            var checkProducts = $("[name='checkProducts']")
            $.each(checkProducts,function(){
                if(this.checked){
                    var pid = this.value
                    $.ajax({
                        url: '${pageContext.request.contextPath}/product/deleteProduct.html',
                        dataType: 'text',
                        type: 'get',
                        data: {
                            id: pid
                        },
                        success: function (res) {
                            if(res == "ok"){
                                window.location.reload()
                            }
                        }

                    })
                }
            });
        }


    </script>

</head>
<body>

<div class="wrapper">


    <!-- 左侧导航 -->
    <%@include file="include/left.jsp" %>

    <div class="main-panel">
        <!-- nav -->
        <%@include file="include/nav.jsp" %>

        <div class="content">

            <div class="container-fluid">

                <div class="row">

                    <div class="col-md-12">
                        <div class="card">
                            <div class="header">
                                <h4 class="title">产品管理</h4>
                                <%--<p class="category">Here is a subtitle for this table</p>--%>

                                <form action="${pageContext.request.contextPath}/product/findAllProducts.html" method="get">
                                    <input type="hidden" name="pageNun" value="${pageInfo.pageNum}">
                                    <div style="float:left; margin:0 2px; width: 130px;">
                                        <!-- 一级类目 -->
                                        <select name="cid" id="seltypeID" class="form-control"
                                                style="width: 130px;">
                                            <option value="-1">所有类别
                                            </option>
                                            <c:forEach items="${categories}" var="c">
                                                <c:if test="${c.type == 0}">
                                                    <option
                                                            <c:if test="${pageInfo.cid == c.id}">selected="selected"</c:if>
                                                            value="${c.id}">${c.cname}</option>
                                                </c:if>
                                            </c:forEach>
                                        </select>
                                    </div>
                                    <div style="float:left; margin:0 2px; width: 100px;">
                                        <select name="searchCsid" id="selPend" class="form-control">
                                            <option selected="selected" value="-1">请选择</option>
                                        </select>
                                    </div>

                                    <div style="float:left; margin:0 2px; width: 130px;">
                                        <input type="text" class="form-control" placeholder="产品名称" size=8
                                               name="searchProName" value="${pageInfo.searchProName}">
                                    </div>
                                    <div style="float:left; margin:0 2px; width: 65px;">
                                        <button type="submit" class="btn btn-info btn-fill pull-right">查询</button>
                                    </div>
                                    <div style="float:left; margin:0 2px; width: 65px;">
                                        <button type="button"  onclick="window.location.href='${pageContext.request.contextPath}/product/addProduct.html'" class="btn btn-info btn-fill pull-right">添加</button>
                                    </div>
                                </form>


                            </div>


                            <!-- 列表开始 -->
                            <div class="content table-responsive table-full-width">


                                    <table class="table table-hover table-striped">
                                        <thead>
                                        <th>序号</th>
                                        <th>图片</th>
                                        <th>名称</th>
                                        <th>时间</th>
                                        <th>类型</th>

                                        <th></th>
                                        <th>操作</th>
                                        <th>
                                            <button class="btn btn-info btn-fill pull-left"
                                                    id="delPro">删除
                                            </button>
                                        </th>

                                        </thead>
                                        <tbody>
                                        <!-- 列表开始 -->
                                        <c:forEach items="${pageInfo.list}" var="p" varStatus="vs">
                                            <tr>
                                                <td>${vs.count}</td>
                                                <td><img src="${pageContext.request.contextPath}/images${p.proPicture}"
                                                         width="90" height="90"></td>
                                                <td>${p.proName}</td>
                                                <td><fmt:formatDate value="${p.createTime}" pattern="yyyy-MM-dd"/></td>
                                                <!-- 显示类目名称 -->
                                                <c:forEach items="${categoryseconds}" var="cs">
                                                    <c:if test="${p.csid == cs.id}">
                                                        <td>${cs.csname}</td>
                                                    </c:if>
                                                </c:forEach>
                                                <td></td>
                                                <td>
                                                    <button type="button" rel="tooltip" title="修改"
                                                            class="btn btn-info btn-simple btn-xs"
                                                            onclick="window.location.href='${pageContext.request.contextPath}/product/updateProduct.html?pid=${p.id}&pageNum=${pageInfo.pageNum}&cid=${pageInfo.cid}&searchCsid=${pageInfo.searchCsid}&searchProName=${pageInfo.searchProName}'">
                                                        <i class="fa fa-edit"></i>
                                                    </button>
                                                </td>

                                                <td><label class="checkbox"> <input
                                                        type="checkbox" value="${p.id}" name="checkProducts"
                                                        data-toggle="checkbox">
                                                </label></td>


                                            </tr>
                                        </c:forEach>
                                        <!-- <tr>
                                            <td>1</td>
                                            <td>Dakota Rice</td>
                                            <td>$36,738</td>
                                            <td>Niger</td>
                                            <td>Oud-Turnhout</td>
                                        </tr> -->
                                        </tbody>
                                    </table>
                            </div>

                            <!-- 页码 -->
                            <div style=" margin: 0 0 0px 50px;padding:0 0 20px 0; width: 70%;">

                                <c:if test="${pageInfo.hasPreviousPage}">
                                    <a href="${pageContext.request.contextPath}/product/findAllProducts.html?pageNum=1&cid=${pageInfo.cid}&searchCsid=${pageInfo.searchCsid}&searchProName=${pageInfo.searchProName}">【首页】 </a>
                                    <a href="${pageContext.request.contextPath}/product/findAllProducts.html?pageNum=${pageInfo.pageNum - 1}&cid=${pageInfo.cid}&searchCsid=${pageInfo.searchCsid}&searchProName=${pageInfo.searchProName}">【上一页】 </a>
                                </c:if>

                                <c:forEach items="${pageInfo.navigatepageNums}" var="i">
                                    <c:if test="${i == pageInfo.pageNum}"><font color="red">【${i}】</font></c:if>
                                    <c:if test="${i != pageInfo.pageNum}">
                                        <a href="${pageContext.request.contextPath}/product/findAllProducts.html?pageNum=${i}&cid=${pageInfo.cid}&searchCsid=${pageInfo.searchCsid}&searchProName=${pageInfo.searchProName}">【${i}】 </a>
                                    </c:if>
                                </c:forEach>

                                <c:if test="${pageInfo.hasNextPage}">
                                    <a href="${pageContext.request.contextPath}/product/findAllProducts.html?pageNum=${pageInfo.pageNum + 1}&cid=${pageInfo.cid}&searchCsid=${pageInfo.searchCsid}&searchProName=${pageInfo.searchProName}">【下一页】 </a>
                                    <a href="${pageContext.request.contextPath}/product/findAllProducts.html?pageNum=${pageInfo.pages}&cid=${pageInfo.cid}&searchCsid=${pageInfo.searchCsid}&searchProName=${pageInfo.searchProName}">【末页】 </a>
                                </c:if>
                            </div>


                            <form action="${pageContext.request.contextPath}/product/findAllProducts.html" method="post">
                                <div
                                        style="float: right; margin:-50px 10px 0 0; width: 60px; height: 40px">
                                    <button type="submit" id="skipBut"
                                            class="btn btn-info btn-fill pull-right">跳转
                                    </button>
                                </div>
                                <div
                                        style="float: right; margin:-50px 80px 0 0; width: 60px; height: 40px">
                                    <input type="hidden" value="${pageInfo.cid}" name="cid">
                                    <input type="hidden" value="${pageInfo.searchCsid}" name="searchCsid">
                                    <input type="hidden" value="${pageInfo.searchProName}" name="proName">
                                    <input type="number" id="skipNum" min="1" max="${pageInfo.pages}"
                                           class="form-control"
                                           placeholder="页面" size=2 name="pageNum" value="${pageInfo.pageNum}">
                                </div>

                            </form>

                        </div>
                    </div>


                </div>
            </div>
        </div>


        <%@include file="include/footer.jsp" %>
    </div>
</div>


</body>


</html>